<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选框的全选和全不选</title>
</head>
<body>
<table border="1" align="center" width="600px">
    <tr>
        <td><input type="checkbox" onclick="fun1(this)"/></td>
        <td>用户名</td>
        <td>密码</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="id" value="1"/></td>
        <td>赵云</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="id" value="2"/></td>
        <td>关羽</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="id" value="3"/></td>
        <td>马超</td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="id" value="4"/></td>
        <td>黄哈哈</td>
        <td>444</td>
    </tr>
    <tr>
        <td><a href="javaScript:fun2();">反选</a></td>
        <td><a href="javaScript:fun3();">删除</a></td>
    </tr>
</table>
</body>
<script>

    //复选框全选
    function fun1(a) {
        //获取复选框
        let aa = document.getElementsByName("id");
        //让复选框状态和通过getName获取的id复选框保持一致
        for (let i = 0; i < aa.length; i++) {
            aa[i].checked=a.checked;
        }
    }
    
    //复选框反选
    function fun2() {
        //获取复选框
        let bb = document.getElementsByName("id");
        //不一致
        for (let i = 0; i < bb.length;i++){
            bb[i].checked=!bb[i].checked;
        }
    }

    //删除
    function fun3() {
        //获取复选框
        let cc = document.getElementsByName("id");
        //通过数组接收选中的数据
        let array = new Array();
        //循环获取每一个选中的checked
        for (let i = 0; i < cc.length;i++){
           if (cc[i].checked){
               //使用集合接受,防止空值
               array.push(cc[i].value);
           }
        }
        alert(array);


    }
</script>
</html>